Component({
  properties: {
    name: {
      type: String,
      value: ''
    },
    active: {
      type: Boolean,
      value: false
    },
    size: {
      type: Number,
      value: 24
    },
    color: {
      type: String,
      value: '#999999'
    },
    activeColor: {
      type: String,
      value: '#ff6b9d'
    },
    class: {
      type: String,
      value: ''
    },
    style: {
      type: String,
      value: ''
    }
  },

  data: {
    iconMap: {
      'home': '🏠',
      'category': '📋',
      'cart': '🛒',
      'profile': '👤',
      'search': '🔍',
      'heart': '❤️',
      'heart_outline': '🤍',
      'plus': '➕',
      'minus': '➖',
      'close': '✖️',
      'arrow_right': '▶️',
      'arrow_left': '◀️',
      'location': '📍',
      'phone': '📞'
    }
  },

  observers: {
    'name': function(name) {
      this.setData({
        iconText: this.data.iconMap[name] || '❓'
      });
    }
  },

  attached() {
    this.setData({
      iconText: this.data.iconMap[this.properties.name] || '❓'
    });
  }
});